<template>
	<view style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
		<view v-for="(item,index) in list" style="width: 33%;margin-bottom: 20rpx;" class="u-flex u-row-center"
			@click="goDetail(item)">
			<view style="width: 200rpx;">
				<view style="background-color: #ededed;width: 200rpx;height: 200rpx;border-radius: 10rpx;">
					<image style="width:200rpx;height: 200rpx;" mode="widthFix" :src="item.image">
					</image>
				</view>
				<view class="text u-line-2">{{item.storeName}}</view>
				<view class="text1">￥{{item.price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import product from '@/components/product.vue'
	import {
		getRecommendList,
	} from '@/api/storeProduct.js'
	export default {
		name: "recommend",
		props: {

		},
		components: {
			product
		},
		data() {
			return {
				list: []
			};
		},
		mounted() {

		},
		computed: {

		},
		methods: {
			initList(data) {
				getRecommendList(data).then(res => {
					this.list = res.data
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/sub/store/detail?id=' + item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.text {
		font-size: 25rpx;
		text-align: center;
		line-height: 36rpx;
		height: 72rpx;
		color: rgba(65, 68, 79, 1);
	}

	.text1 {
		color: rgba(20, 21, 26, 1);
		font-size: 25rpx;
		font-weight: bold;
		text-align: center;
		line-height: 50rpx;
	}
</style>
